<script>
import _ from 'lodash'
import { Select } from "element-ui";
import EventBus from "./EventBus";
export default {
  name: "LazySelect",
  extends: Select,
  props: {
    optionsData: {
      type: Array,
    },
    pushNum: {
      type: Number,
      default: 20,
    },
    initNUm: {
      type: Number,
      default: 20,
    },
    remoteMethod: {
      type: Function,
      default: function (val) {
        if (val) {
          this.filterData = this.optionsData.filter((item, index) => {
            return item.includes(val);
          });
          EventBus.$emit("reset", this.filterData.slice(0, this.initNUm));
        } else {
          EventBus.$emit("reset", this.optionsData.slice(0, this.initNUm));
        }
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  watch: {
    optionsData() {
      this.filterData = this.optionsData;
      EventBus.$emit("reset", this.optionsData.slice(0, this.initNUm));
    },
    currentIndex(newVal) {
      EventBus.$emit(
        "push",
        this.filterData.slice(newVal, newVal + this.pushNum)
      );
    },
  },
  mounted() {
    this.initScrollEvent()
  },
  methods: {
    initScrollEvent() {
      const SELECTWRAP_DOM = this.$el.querySelector(
        ".el-select-dropdown .el-select-dropdown__wrap"
      );
      if (SELECTWRAP_DOM) {
        SELECTWRAP_DOM.addEventListener("scroll", _.throttle((event) => {
          const condition = event.target.scrollHeight - event.target.scrollTop <= event.target.clientHeight;
          if (condition) {
            this.currentIndex += this.pushNum;
          }
        },300));
      }
    },
  },
};
</script>

<style lang='less' scoped>
</style>
